<template>
  <div class="forgetPay">
    <!-- <x-header :left-options="{backText: ''}">忘记支付密码</x-header> -->
    <top :text="'忘记支付密码'"></top>
    <div style="height: 40px;"></div>
    <div class="mT10">
      <div class="bankDetail">
        <span>请输入手机号</span>
        <input placeholder="请输入手机号" class="fa15 fa bankMoney" v-model="phoneNumber" type="number" style="width: 60%;">
      </div>
      <div class="bankDetail">
        <span>请输入验证码</span>
        <input placeholder="请输入验证码" class="inputSty" style="margin-top:3px;font-size: 13px;" v-model="validateCode" type="number">
        <div class="sendNum fa" @click="getVerifyNum">
          <button :disabled='isDisabled'>{{verificationCode}}</button>
        </div>

      </div>
    </div>
    <div class="confimBankBox">
      <div class="confimBank" @click="submitBtn">提交</div>
    </div>
  </div>
</template>
<script>
  import { XHeader } from 'vux'
  import tips from '../../service/tips.js'
  import http from '../../service/http.js'
  import Top from '../../components/common/top.vue'
  export default {
    data() {
      return {
        verificationCode: "发送验证码",
        countDown: 60,
        isDisabled: false,
        phoneNumber: '',
        validateCode: ""
      }
    },
    methods: {
      // 获取短信验证码
      getVerifyNum() {
        if (!this.phoneNumber.trim()) {
          tips.tips("请输入手机号");
          return false;
        }
        if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.phoneNumber.trim())) {
          tips.tips("请输入有效的手机号");
          return false;
        }
        this.countDown = 60;
        this.verificationCode = this.countDown + "s";
        var timer = setInterval(() => {
          this.countDown--;
          this.isDisabled = true;
          if (this.countDown <= 1) {
            this.isDisabled = false;
            this.countDown = '再次获取';
            clearInterval(timer);
          }
          if (this.countDown >= 0) {
            this.verificationCode = this.countDown + "s";
          } else {
            this.verificationCode = this.countDown
          }
        }, 1000)
        http.post("/user/sms", {
          username: this.phoneNumber
        }).then((res) => {
          if (res.status == 200) {
            tips.tips("验证码发送成功");
          } else {
            tips.tips("验证码发送失败");
          }
        }).catch((res) => {
          tips.tips(res.msg)
        })
      },
      submitBtn() {
        if (!this.phoneNumber.trim()) {
          tips.tips("请输入手机号");
          return false;
        }
        if (!/^1[3|4|5|7|8][0-9]{9}$/.test(this.phoneNumber.trim())) {
          tips.tips("请输入有效的手机号");
          return false;
        }
        if (!this.validateCode.trim()) {
          tips.tips("请输入验证码");
          return false;
        }
        http.post("/user/pwdNext", {
          username: this.phoneNumber,
          smscode: this.validateCode
        }).then((res) => {
          if (res.status == 200) {
            this.$router.push({ path: "/main/setPayPassword" })
          }
        }).catch((res) => {
          tips.tips(res.msg)
        })
      }
    },
    components: {
      XHeader,
      Top
    }
  }
</script>
<style lang="less" scoped>
  body {
    background: #f6f6f6;
  }

  .c9 {
    color: #999;
  }

  .c3 {
    color: #333;
  }

  .fa {
    position: absolute;
  }

  .fa15 {
    right: 15px;
  }

  .fr65 {
    right: 65px;
  }

  .mT10 {
    margin-top: 10px;
  }

  .forgetPay .bankMoney {
    border: none;
    outline: none;
    text-align: right;
    display: inline-block;
    height: 45px;
    width: 69%;
    font-size: 15px;
  }

  .forgetPay .sendNum {
    top: 0px;
    right: 0px;
  }

  .sendNum button {
    color: #fe9f0a;
    border: none;
    background: #fff;
    outline: none;
    top: 15px;
    width: 100px;
  }

  .forgetPay .sendNum::before {
    content: '';
    width: 2px;
    height: 10px;
    background: #ddd;
    display: inline-block;
    margin-right: 0px;
  }

  .forgetPay .vux-header {
    background: #fff;
  }

  .forgetPay .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .forgetPay .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .forgetPay .bankDetail {
    border: 1px solid #f6f6f6;
    height: 45px;
    line-height: 45px;
    background: #fff;
    padding-left: 15px;
    position: relative;
  }

  .forgetPay .inputSty {
    border: none;
    outline: none;
    text-align: right;
    position: absolute;
    right: 120px;
    display: inline-block;
    height: 42px;
    font-size: 16px;
    width: 100px;
  }

  .forgetPay .confimBankBox {
    position: relative;
    padding: 0px 15px;
    margin-top: 60px;
  }

  .forgetPay .confimBankBox .confimBank {
    width: 100%;
    height: 45px;
    color: #fff;
    line-height: 45px;
    text-align: center;
    background: linear-gradient(left, #fedd32, #fe9f0a);
    background: -webkit-gradient(linear, left top, right top, from(#fedd32), to(#fe9f0a));
    border-radius: 25px;
  }
</style>